<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
  </head>
  <body>
      <div id="app">hello</div>
      <script>
          // 模拟Vue中的data选项
          let data = {
              msg: 'hie',
              conunt: 0
          }

          // 模拟Vue的实例
          let vm = {}
          
          proxyData(data)

          function proxyData(data) {
              Object.keys(data).forEach(key => {
                  // 数据劫持：当访问或者设置VM汇总的成员的时候，做一些干预操作
                Object.defineProperty(vm, key, {
                    // 当获取值的时候执行
                    get () {
                        console.log('get', key, data[key])
                        return data.msg
                    },
                    // 当修改值的时候执行
                    set(newValue) {
                        if(newValue === data[key]) {
                            return
                        }
                        data[key] = newValue
                        document.querySelector('#app').textContent = data[key]
                        console.log('set', key, data[key])
                    }
                })
              })
          }
          // 测试
          vm.msg = "Hello Miya"
          vm.conunt = 60
          console.log(vm.msg)
        //   console.log()
      </script>
  </body>
</html>
